<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true">
            <el-form-item prop="status">
               <el-tree-select
                  v-model="queryParams.serviceId"
                  :data="deptTreeData"
                  :props="{ value: 'id', label: 'label', children: 'children' }"
                  :render-after-expand="false"
                  show-checkbox
                  value-key="id"
                  check-strictly
                  placeholder="请选择服务区"
                  class="with-200"
                  @check="handleChange"
               />
            </el-form-item>
            <el-form-item prop="shopId">
               <el-select
                  v-model="queryParams.shopId"
                  placeholder="请选择店铺"
                  class="with-200"
                  :value-on-clear="''"
                  clearable
               >
               <el-option
                  v-for="item in shopList"
                  :key="item.shopId"
                  :label="item.shopName"
                  :value="item.shopId"
                  />
               </el-select>
            </el-form-item>

            <el-form-item class="with-240">
               <el-date-picker
                  v-model="queryParams.dateRange"
                  value-format="YYYY-MM-DD hh:mm:ss"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
               ></el-date-picker>
            </el-form-item>

            <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
            </el-form-item>
         </el-form>
         <div>
            <progressBar ref="progressBarRef"></progressBar>
         </div>
         <div class="chart-box">
            <el-row :gutter="10">
                <el-col :span="12">
                    <examine ref="examineRef"></examine>
                </el-col>
                <el-col :span="12">
                    <storeProblem ref="storeProblemRef"></storeProblem>
                </el-col>
            </el-row>
         </div>
         <div class="chart-box">
            <el-row :gutter="10">
                <el-col :span="12">
                    <shopTour ref="shopTourRef"></shopTour>
                </el-col>
                <el-col :span="12">
                    <otherInspection ref="otherInspectionRef"></otherInspection>
                </el-col>
            </el-row>
         </div>
    </div>
</template>
<script setup>
import useUserStore from '@/store/modules/user'
import { getShopList } from "@/api/system/shop"

import progressBar from './component/progressBar.vue';
import examine from './component/examine.vue';
import storeProblem from './component/storeProblem.vue';
import shopTour from './component/shopTour.vue';
import otherInspection from './component/otherInspection.vue';

const progressBarRef = ref(null)
const examineRef = ref(null)
const storeProblemRef = ref(null)
const shopTourRef = ref(null)
const otherInspectionRef = ref(null)

const shopList = ref([])
const queryParams = ref(
    {
        serviceId: '',
        shopId: '',
        startDateTime: '',
        endDateTime: '',
        dateRange: []
    }
)

// 搜索
function handleQuery() {
    if(queryParams.value.dateRange && queryParams.value.dateRange.length) {
        queryParams.value.startDateTime = queryParams.value.dateRange[0].replace('12:00:00', '00:00:00')
        queryParams.value.endDateTime = queryParams.value.dateRange[1].replace('12:00:00', '00:00:00')
    }else{
        queryParams.value.startDateTime = ''
        queryParams.value.endDateTime = ''
    }
    progressBarRef.value.getData(queryParams.value)
    examineRef.value.getData(queryParams.value)
    storeProblemRef.value.getData(queryParams.value)
    shopTourRef.value.getData(queryParams.value)
    otherInspectionRef.value.getData(queryParams.value)
}

const deptTreeData = computed(()=>{
   const data = useUserStore().deptTreeData
   if(data.length) {
      queryParams.value.serviceId = data[0].id;
      getShopDataList()
   }
   return data
})

//选择服务区
const handleChange = (item) =>{
   queryParams.shopId  = "";
   queryParams.serviceId = item.id;
   getShopDataList();
}

const getShopDataList = () =>{
   getShopList({pageNum: 1,pageSize: 200,serviceId:queryParams.value.serviceId}).then(response => {
      if (response.code === 200) {
         shopList.value = response?.rows || [];
         queryParams.value.dateRange = getDay()
         handleQuery()
      }
   })
}

function getDay() {
   const currentDate = new Date();
   const sevenDaysAgo = new Date(currentDate.getTime() - 30 * 24 * 60 * 60 * 1000);

   const formatDate = (date) => {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, '0');
   const day = String(date.getDate()).padStart(2, '0');
   return `${year}-${month}-${day}`;
   };

   const startDate = formatDate(sevenDaysAgo);
   const endDate = formatDate(currentDate);

   return [startDate+' 00:00:00', endDate+' 00:00:00']
}
</script>
<style lang="scss" scoped>
.chart-box{
    margin: 10px 0;
}
</style>